<template>
  <div>
    <div class="die">
      <div v-for="(item,index) in xuanzlist" :key="index" @click="back_clik(index)">
        <div>{{item.name}}</div>
        <img :src="item.src" alt />
      </div>
    </div>
    <div class="two_div">
      <div
        v-for="(item,index) in shenglist"
        :key="index"
        class="div_name"
        @click="changediqu(index)"
      >{{item}}</div>
    </div>
    <div class="button" :style="styles">
      <div class="button_divone" @click="nav_div">确定</div>
      <div class="button_divtwo" @click="delece">取消</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      indexNbm: 0,
      xuanzlist: [
        {
          name: "选择省",
          src: "https://www.zhaoshengku.net/wx-xz.png"
        },
        {
          name: "选择市",
          src: "https://www.zhaoshengku.net/wx-xz.png"
        },
        {
          name: "选择区/县",
          src: ""
        }
      ],
      shenglist: [],
      getareasSheng: [],
      getareasShi: [],
      getareasQuxi: [],
      styles: "",
      info_province_id: 0,
      info_city_id: 0,
      info_county_id: 0,
      optionId: -1
    };
  },
  methods: {
    // 选择省市区
    changediqu(e) {
      wx.showToast({
        title: "",
        icon: "loading",
        duration: 1000
      });
      if (this.indexNbm == 0) {
        this.xuanzlist[1].name = "选择市";
        this.xuanzlist[2].name = "选择市/区";
        let arr = [];
        this.xuanzlist[0].name = this.shenglist[e];
        this.info_province_id = this.getareasSheng[e].city_id;
        console.log(this.info_province_id);
        //  省
        wx.request({
          url: "https://api.zhaoshengku.net/api/data/getareas",
          method: "post",
          data: {
            city_pid: this.info_province_id
          },
          success: res => {
            if (res.data.code == 200) {
              this.getareasShi = res.data.data;
              this.getareasShi.forEach(element => {
                arr.push(element.city_name);
              });
              this.shenglist = arr;
              wx.hideToast();
            }
          },
          fail: res => {
            console.log(res);
            if (res.errMsg) {
              wx.showToast({
                title: "请检查网络连接！",
                icon: "none",
                duration: 1500
              });
            }
          }
        });
        this.indexNbm = 1;
      } else if (this.indexNbm == 1) {
        this.xuanzlist[2].name = "选择市/区";
        let arr = [];
        this.xuanzlist[1].name = this.shenglist[e];
        this.info_city_id = this.getareasShi[e].city_id;
        this.indexNbm = 2;
        // 市
        wx.request({
          url: "https://api.zhaoshengku.net/api/data/getareas",
          method: "post",
          data: {
            city_pid: this.info_city_id
          },
          success: res => {
            if (res.data.code == 200) {
              this.getareasQuxi = res.data.data;
              this.getareasQuxi.forEach(element => {
                arr.push(element.city_name);
              });
              this.shenglist = arr;
              wx.hideToast();
            }
          },
          fail: res => {
            console.log(res);
            if (res.errMsg) {
              wx.showToast({
                title: "请检查网络连接！",
                icon: "none",
                duration: 1500
              });
            }
          }
        });
      } else {
        // 区县
        this.xuanzlist[2].name = this.shenglist[e];
        this.info_county_id = this.getareasQuxi[e].city_id;
        wx.hideToast();

      }
    },
    // 重新选择
    back_clik(e) {
      if (e == 0) {
        let arr = [];
        this.indexNbm = 0;
        this.getareasSheng.forEach(element => {
          arr.push(element.city_name);
        });
        this.shenglist = arr;
      } else if (e == 1) {
        if (this.xuanzlist[0].name == "选择省") {
          wx.showToast({
            title: "请先选择省！",
            icon: "none",
            duration: 1000
          });
          return;
        } else {
          let arr = [];
          this.indexNbm = 1;
          this.getareasShi.forEach(element => {
            arr.push(element.city_name);
          });
          this.shenglist = arr;
        }
      } else {
        if (this.xuanzlist[1].name == "选择市") {
          wx.showToast({
            title: "请先选择市！",
            icon: "none",
            duration: 1000
          });
          return;
        }
        this.indexNbm = 2;
      }
    },
    // 跳转
    nav_div() {
      if (this.info_province_id == 0) {
        wx.showToast({
          title: "请选择省份",
          icon: "none",
          duration: 1000
        });
        return;
      }
      if (this.info_city_id == 0) {
        wx.showToast({
          title: "请选择市",
          icon: "none",
          duration: 1000
        });
        return;
      }
      if (this.info_county_id == 0) {
        wx.showToast({
          title: "请选择区/县",
          icon: "none",
          duration: 1000
        });
        return;
      }
      wx.showToast({
        title: "",
        icon: "loading",
        duration: 1000
      });
      var type;
      var urls;
      var tishiv;
      if (this.optionId == 0) {
        type = 20;
        url = "educational";
        tishiv = "没有搜索到对应的教育机构";
      } else {
        type = 10;
        urls = "EnrolmentTeacher";
        tishiv = "没有搜索到对应的招生工作者";
      }
      this.info_province_id, this.info_city_id, this.info_county_id;
      wx.request({
        url: "https://api.zhaoshengku.net/api/data/search",
        method: "post",
        data: {
          type: type,
          info_province_id: this.info_province_id,
          info_city_id: this.info_city_id,
          info_county_id: this.info_county_id
        },
        success: res => {
          if (res.data.code == 200) {
            console.log(res);
            wx.hideToast();
            if (res.data.data.data.length == 0) {
              wx.showToast({
                title: tishiv,
                icon: "none",
                duration: 2000
              });
            } else {
              var data = JSON.stringify(res.data.data.data);
              wx.reLaunch({
                url: "/pages/" + urls + "/main?data=" + data
              });
              // _this.searList = res.data.data.data
              // _this.searisshow = true;
            }
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
      var url;
      if (this.optionId == 0) {
      }
    },
    delece() {
      wx.navigateBack({
        delta: 1
      });
    }
  },
  onShow() {
    // 设置头
    this.xuanzlist[0].name = "选择省";
    this.xuanzlist[1].name = "选择市";
    this.xuanzlist[2].name = "选择区/县";
    this.info_province_id = 0;
    this.info_county_id = 0;
    this.info_city_id = 0;
    wx.setNavigationBarTitle({
      title: "选择地址"
    });
    // 获取省份
    wx.request({
      url: "https://api.zhaoshengku.net/api/data/getareas",
      method: "post",
      success: res => {
        console.log(res);
        let arr = [];
        if (res.data.code == 200) {
          this.getareasSheng = res.data.data;
          this.getareasSheng.forEach(element => {
            arr.push(element.city_name);
          });
          this.shenglist = arr;
          console.log(this.shenglist);
        }
      },
      fail: res => {
        console.log(res);
        if (res.errMsg) {
          wx.showToast({
            title: "请检查网络连接！",
            icon: "none",
            duration: 1500
          });
        }
      }
    });
    // 获取设备的高
    wx.getSystemInfo({
      success: res => {
        console.log(res);
        var nbm = res.windowHeight * 2 - 120;
        this.styles = "position: fixed;top:" + nbm + "rpx";
        console.log(this.styles);
      }
    });
  },
  onLoad(option) {
    this.optionId = option.id;
  }
};
</script>

<style scoped>
.die {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 33rpx;
  position: fixed;
  top: 0rpx;
  background: #fff;
  z-index: 22222222222222222222;
  height: 200rpx;
  align-items: center;
}
div {
  box-sizing: border-box;
}
.die > div {
  width: 33.333333%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 20rpx;
}
.die img {
  width: 12rpx;
  height: 22rpx;
}
.two_div {
  margin-top: 200rpx;
  margin-bottom: 120rpx;
}
.die > div > div {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #333;
  font-weight: bold;
  padding: 0 20rpx;
}
.div_name {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  color: #333;
  border-bottom: 1px solid #eee;
  font-size: 30rpx;
  padding-left: 20rpx;
}
.button {
  width: 100%;
  padding: 20rpx;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;

  z-index: 2222222222222222222222;
}
.button_divone {
  width: 60%;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 10rpx;
  background: rgba(34, 151, 212, 1);
  color: #fff;
  font-size: 26rpx;
}
.button_divtwo {
  width: 30%;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 10rpx;
  background: #fff;
  border: 1px solid #999;
  color: #333;
  font-size: 26rpx;
}
</style>
